<template>
  <div class="content g-mt10">
    <div class="current-bar">
      <Breadcrumb class="current-bar">
        <BreadcrumbItem to="/">
          <Icon type="ios-home-outline"></Icon>
          Home
        </BreadcrumbItem>
        <BreadcrumbItem to="/components/breadcrumb">
          <Icon type="social-buffer-outline"></Icon>
          Components
        </BreadcrumbItem>
        <BreadcrumbItem>
          <Icon type="pound"></Icon>
          Breadcrumb
        </BreadcrumbItem>
      </Breadcrumb>
    </div>
    
    <div class="side">
      <div class="side-item active">
        <div class="ico">
          <i class="bg-line top"></i>
          <Icon type="clock"></Icon>
          <i class="bg-line bottom"></i>
        </div>

        <div class="title">
          <h4>侧边栏标题</h4>
        </div>
      </div>

      <div class="side-item">
        <div class="ico">
          <i class="bg-line top"></i>
          <Icon type="clock"></Icon>
          <i class="bg-line bottom"></i>
        </div>

        <div class="title">
          <h4>侧边栏标题</h4>
        </div>
      </div>

      <div class="side-item">
        <div class="ico">
          <i class="bg-line top"></i>
          <Icon type="clock"></Icon>
          <i class="bg-line bottom"></i>
        </div>

        <div class="title">
          <h4>侧边栏标题</h4>
        </div>
      </div>

      <div class="side-item">
        <div class="ico">
          <i class="bg-line top"></i>
          <Icon type="clock"></Icon>
          <i class="bg-line bottom"></i>
        </div>

        <div class="title">
          <h4>侧边栏标题</h4>
        </div>
      </div>
    </div>
    
    <div class="new-con">
    	<div class="new-item">
        <div class="new-title">
          <i class="new-head">
            年度最新
          </i>
          <h4>史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!</h4>
          <span class="date">2018-12-12</span>
        </div>
        <div class="new-desc">
          <p class="text">
            史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!
            史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!
          </p>
          <router-link to="/news/1" class="loading-more">
            loading-more
          </router-link>
        </div>
      </div>
      <div class="new-item">
        <div class="new-title">
          <i class="new-head">
            年度最新
          </i>
          <h4>史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!</h4>
          <span class="date">2018-12-12</span>
        </div>
        <div class="new-desc">
          <p class="text">
            史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!
            史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!
          </p>
          <router-link to="/news/1" class="loading-more">
            loading-more
          </router-link>
        </div>
      </div>
      <div class="new-item">
        <div class="new-title">
          <i class="new-head">
            年度最新
          </i>
          <h4>史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!</h4>
          <span class="date">2018-12-12</span>
        </div>
        <div class="new-desc">
          <p class="text">
            史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!
            史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!
          </p>
          <router-link to="/news/1" class="loading-more">
            loading-more
          </router-link>
        </div>
      </div>
      <div class="new-item">
        <div class="new-title">
          <i class="new-head">
            年度最新
          </i>
          <h4>史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!</h4>
          <span class="date">2018-12-12</span>
        </div>
        <div class="new-desc">
          <p class="text">
            史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!
            史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!
          </p>
          <router-link to="/news/1" class="loading-more">
            loading-more
          </router-link>
        </div>
      </div>
      <div class="new-item">
        <div class="new-title">
          <i class="new-head">
            年度最新
          </i>
          <h4>史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!</h4>
          <span class="date">2018-12-12</span>
        </div>
        <div class="new-desc">
          <p class="text">
            史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!
            史上最长的新闻标题!!史上最长的新闻标题!!史上最长的新闻标题!!
          </p>
          <router-link to="/news/1" class="loading-more">
            loading-more
          </router-link>
        </div>
      </div>
    </div>
    
    <div class="loading-wrap" v-show="!loading">
      <loading></loading>
    </div>
    
    <div class="page">
    	<Page :total="count" :page-size="display" :current="currentPage" :count="count" show-total @on-change="selectPage"></Page>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Loading from 'base/loading/loading'

  export default {
    props: {
      loading: {
        type: Boolean,
        default: false
      },
      current: {
        type: Object,
        default: {}
      },
      newList: {
      	type: Array,
      	default: []
      },
      display: {
      	type: Number,
      	default: 1
      },
      allPage: {
      	type: Number,
      	default: 5
      },
      count: {
      	type: Number,
      	default: 0
      },
      currentPage: {
      	type: Number,
      	default: 1
      },
      sideList: {
        type: Array,
        default: []
      }
    },
    methods: {
    	selectPage(size) {
    		this.$emit('select-page', {size: size, display: this.display})
    	}
    },
    components: {
      Loading
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .content
    position: relative
    min-height: 800px
    padding-bottom: 80px
    .current-bar
      padding: 10px 0
  .side
    float: left
    width: 230px
    padding: 0 30px 80px
    border-right: 1px solid $vice-color
    .side-item
      position: relative
      padding: 30px 0
      height: 110px
      line-height: 50px
      .ico
        float: left
        wh(50px, 50px)
        text-align: center
        lin-height: 50px
        sc(35px, $white)
        background-color: #ccc
        br(50%)
        .bg-line
          position: absolute
          left: 24px
          width: 2px
          height: 30px
          background-color: #ccc
          &.top
            top: 0
          &.bottom
            top: 80px
      i
        font-weight: bold
        position:relative
        top: 2px
        left: 0
      .title
        margin-left: 60px
        sc($font-small-x, #ccc)
      &.active
        .ico
          background-color: $vice-color
          .bg-line
            background-color: $vice-color
        .title
          color: $vice-color
  .new-con
    margin: 0 10px 0 240px
    .new-item
      margin-top: 27px
      border-bottom: 1px solid $vice-color
      &:first-child
        margin-top: 0;
      .new-title
        position: relative
        hh(24px)
        .new-head
          ltposition(0, 0)
          wh(80px, 24px)
          sc($font-small-x, $white)
          font-style: normal
          background: url('./new-head-bg.png') no-repeat center center
          text-indent: 9px
        h4
          padding-left: 90px
          margin-right: 131px
          sc($font-medium, $back)
          no-wrap()
          font-weight: bold
        .date
          rtposition(11px, 0)
          width: 120px
          text-align: right
          sc($font-small-x, $vice-color)
      .new-desc
        position: relative
        height: 60px
        margin: 5px 0 20px 0
        line-height: 30px
        color: #999
        overflow: hidden
        .loading-more
          rtposition(11px, 30px)
          padding: 0 8px
          background-color: $vice-color
          color: $white
          br(10px)
 	.page
 		lbposition(210px, 24px)
 		right: 0
 		text-align: center
  .loading-wrap
    ltposition(0, 0)
    wh(100%, 100%)
    z-index: 999
    background-color: rgba(0,0,0,.4)
</style>